<template>
  <div class="MoneyWrap">
      <!--成交中心头部-->
    <div class="MoneyHeader">统计时间：<span>2019-07-25 20:24</span></div>
    <!--成交中心第二块-->
    <div class="MoneyTwo">
        账户资金
    </div>
    <!-- 现金展示的三部分 -->
    <div class="moneySection">
        <div class="top">
          <div class="left">
            <div class="name">可提现余额</div>
            <div class="bottom"><div class="money">{{subMoney}}</div><div class="bottom_center">元</div><div class="bottom_btn"><span class="btn" @click="sub">提现</span> </div></div>
          </div>
          <div class="center">
            <div class="name">活动保证金</div>
            <div class="bottom"><div class="money">{{activeMoney}}</div> <div class="bottom_center">元</div><div class="bottom_btn"><span class="btn" @click="recharge">充值</span></div></div>
          </div>
          <div class="right">
            <div class="name">资金保证金</div>
            <div class="bottom"><div class="money">{{ensureMoney}}</div><div class="bottom_center">元</div><div class="bottom_btn"><span class="btn" @click="payment">缴纳</span></div></div>
          </div>
        </div>
        <hr style="border-bottom:1px solid rgba(112,112,112,1);"/>
        <div class="updataTime">更新时间：<span>2019-07-25 20:24</span></div>
    </div>
    <!-- 提现记录 -->
    <div class="subRecord">
      提现记录
    </div>
    <div class="subDetail">
      <div class="recordTitle">
         <div class="titleO">创建时间</div>
         <div class="titleO">提现类型</div>
         <div class="titleO">提现金额</div>
         <div class="titleO">手续费</div>
         <div class="titleFi">收款账户</div>
         <div class="titleO">提现状态</div>
      </div>
      <div class="recordStrip">
        <div class="strip" v-for="(item,index) in subList">
            <div class="titleO">{{item.time}}</div>
            <div class="titleO">{{item.type}}</div>
            <div class="titleO">{{item.typ}}</div>
            <div class="titleO">{{item.handmoney}}</div>
            <div class="titleFi">{{item.peo}}<br/>{{item.bank}}</div>
            <div class="titleO">{{item.state}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
      name: "Money",
      data(){
          return {
             subMoney:'1006.82',
             activeMoney:'0',
             ensureMoney:'1000',
             subList:[{"time":"2019-07-25 11:25:32","type":"交易","typ":"1000","handmoney":"0","peo":"中国工商银行","bank":"6226 4545 4554 4545 458","state":"成功"},
             {"time":"2019-07-25 11:25:32","type":"交易","typ":"1000","handmoney":"0","peo":"中国工商银行","bank":"6226 4545 4554 4545 458","state":"成功"},
             {"time":"2019-07-25 11:25:32","type":"交易","typ":"1000","handmoney":"0","peo":"中国工商银行","bank":"6226 4545 4554 4545 458","state":"成功"},]
          }
      },
      methods: {
          //提现方法
          sub(){
              this.$router.push('/SAccountCapital/subMoney');
          },
          //充值
          recharge(){
            this.$message({
                message: '暂未开放',
                type: 'warning'
            });
          },
          //缴纳
          payment(){
             this.$router.push('/SAccountCapital/deposit');
          }

      },
      mounted(){
      }
  }
</script>

<style scoped>
  .MoneyWrap{
      width:1015px;
  }
  .MoneyHeader{
      height:33px;
      line-height:33px;
      background:#FFFFFF;
      font-size:14px;
      font-weight:400;
      color:#1296DB;
      text-indent: 28px;
  }
  .MoneyHeader span{
      color:#1296DB;
  }
 /* 第二块 */
    .MoneyTwo{
        height:40px;
        line-height: 40px;
        background:#FFFFFF;
        font-size:19px;
        font-weight:400;
        color:rgba(0,0,0,1);
        text-indent: 28px;
        margin: 20px 0 15px;
        border-bottom:1px #FB6451 solid ;
    }
    /* 钱部分 */
    .moneySection{
      background: #FFFFFF;
      margin-top: 29px;
    }
   .top{
      padding: 33px 0;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
   }
   .top .left,.center,.right{
      width: 281px;
      height: 122px;
      padding-left: 15px;
      border:1px solid rgba(181,181,181,1);
   }
    .moneySection .name{
      font-size:24px;
      font-family:"PingFang-SC-Bold";
      font-weight:bold;
      line-height: 58px;
      color:rgba(120,120,120,1);
    }
    .moneySection .bottom{
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size:18px;
      font-family:"PingFang-SC-Bold";
      font-weight:bold;
      color:rgba(120,120,120,1);
      line-height: 44px;
    }
    .moneySection .money{
        font-size:26px;
        font-family:"PingFang-SC-Bold";
        font-weight:bold;
        color:rgba(251,100,81,1);
        overflow-x: auto;
    }
    .moneySection .bottom .bottom_center{
      text-align: center;
      width:10%;
    }
    .moneySection .bottom .money,.bottom_btn{
       width: 45%;
    }
    .moneySection .bottom_btn{
      text-align: center;
    }
     .moneySection .bottom_btn .btn{
        cursor:pointer;
        padding: 0 15px;
        line-height: 64px;
        font-size:15px;
        font-family:"PingFang-SC-Medium";
        font-weight:500;
        color:rgba(120,120,120,1);
        border:1px solid rgba(181,181,181,1);
        border-radius: 10%;
     }
      .updataTime{
        line-height: 45px;
        padding-left: 12px;
        font-size:14px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:rgba(120,120,120,1);
      }
      /* 提现记录 */
      .subRecord{
        font-size:19px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:rgba(0,0,0,1);
        border-left: 4px #FB6451 solid ;
        margin-top: 24px;
        padding-left: 12px;
      }
     /* 提现记录详情 */
    .subDetail{
      margin-top:16px;
      font-size:18px;
      font-family:"PingFang-SC-Regular";
      font-weight:400;
      color:rgba(0,0,0,1);
    }
    .recordTitle{
      background: #DCDCDC;
      line-height: 47px;
      text-align: center;
      display: flex;
      flex-direction:row ;
      justify-content: space-around;
    }
    .recordTitle .titleO{
      width: 130px;
      }
    .recordTitle .titleFi{
    width: 350px;
    }
    .recordStrip{
      margin-top:3px ;
    }
    .recordStrip .strip{
      margin-top: 3px;
      height: 85px;
      display: flex;
      flex-direction:row ;
      justify-content: space-around;
    }
    .recordStrip .titleO{
      display: flex;
      align-items: center;
      justify-content: space-around;
       background: #DCDCDC;
      width: 130px;
    }
    .recordStrip .titleFi{
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #DCDCDC;
      width: 350px;
    }
</style>
